<template>
  <div class="app-container system-role">
    <!-- 搜索表单区域 -->
    <el-form
      :inline="true"
      :model="searchForm"
      class="form-search"
      size="medium"
    >
      <el-form-item label="地域选择" prop="areaNumber">
        <Treeselect
          v-model="searchForm.areaNumber"
          :options="areaOptions"
          :normalizer="normalizer"
          placeholder="所有地域"
          class="treeselect"
        />
      </el-form-item>
      <el-form-item label="角色名称">
        <el-input
          v-model="searchForm.roleName"
          placeholder="角色名称"
          class="input-role-name"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-search"
          @click="getRoles"
        >
          查询
        </el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetSearch">
          重置
        </el-button>
      </el-form-item>
    </el-form>
    <!-- 头部按钮区域 -->
    <div class="btn-box">
      <el-button
        size="mini"
        type="primary"
        icon="el-icon-plus"
        @click="dialogAddVisible = true"
      >
        新增
      </el-button>
      <div>
        <el-tooltip class="item" effect="dark" content="刷新" placement="top">
          <el-button
            size="mini"
            circle
            icon="el-icon-refresh"
            :disabled="loading"
            @click="getRoles"
          ></el-button>
        </el-tooltip>
      </div>
    </div>
    <!-- 表格区域 -->
    <el-table
      v-loading="loading"
      stripe
      :data="tableData"
      style="width: 100%"
      :header-cell-style="{
        background: '#F8F8F9',
        color: '#606266'
      }"
    >
      <el-table-column label="#" type="index"> </el-table-column>
      <el-table-column prop="roleName" label="角色名称"> </el-table-column>
      <el-table-column prop="roleDesc" label="角色备注"> </el-table-column>
      <el-table-column prop="areaName" label="归属地域"> </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        align="center"
        header-align="center"
      >
      </el-table-column>
      <el-table-column
        prop="updateTime"
        label="更新时间"
        align="center"
        header-align="center"
      >
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="220"
        header-align="center"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            icon="el-icon-edit"
            @click="showEditDialog(scope.row)"
          >
            修改
          </el-button>
          <el-button
            type="text"
            size="small"
            icon="el-icon-delete"
            @click="deleteRole(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页区域 -->
    <div class="pagination-warp">
      <el-pagination
        :current-page="current"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="limit"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>

    <AddRoleDialog
      :dialog-visible="dialogAddVisible"
      :menus="menus_all"
    ></AddRoleDialog>
    <EditRoleDialog
      :dialog-visible="dialogEditVisible"
      :menus-all="menus_all"
      :menus-role="menus_role"
      :form-edit="formEdit"
    ></EditRoleDialog>
  </div>
</template>

<script>
import { getRoles, deleteRole } from '@/api/super/role';
import { getAllMenus } from '@/api/super/menu';
import { getAllArea } from '@/api/super/area';
import AddRoleDialog from './components/addRoleDialog';
import EditRoleDialog from './components/editRoleDialog';
import Treeselect from '@riophae/vue-treeselect';
import '@riophae/vue-treeselect/dist/vue-treeselect.css';
export default {
  name: 'SuperRole',
  components: {
    AddRoleDialog,
    EditRoleDialog,
    Treeselect
  },
  data() {
    return {
      loading: true,
      dialogEditVisible: false, // 编辑对话框显示与隐藏
      dialogAddVisible: false, // 新增对话框显示与隐藏
      tableData: [], // 表格数据
      current: 1, // 当前页
      limit: 10, // 每页几个
      total: 0, // 总数
      menus_all: [], // 全部菜单
      menus_role: [], // 角色对应菜单
      // 编辑表单
      formEdit: {
        roleId: '',
        roleName: '',
        roleDesc: '',
        areaNumber: null
      },
      // 搜索表单
      searchForm: {
        areaNumber: null,
        roleName: ''
      },
      // 所有地域
      areaOptions: []
    };
  },
  created() {
    this.getRoles();
    this.getAllMenus();
    this.getAllArea();
  },
  methods: {
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.areaNumber,
        label: node.areaName,
        children: node.children
      };
    },
    handleSizeChange(val) {
      this.limit = val;
      this.getRoles();
    },
    handleCurrentChange(val) {
      this.current = val;
      this.getRoles();
    },
    /**
     * 重置查询
     */
    resetSearch() {
      this.searchForm = {
        areaNumber: null,
        roleName: ''
      };
      this.getRoles();
    },
    /**
     * 获取所有地域
     */
    async getAllArea() {
      const { data: res } = await getAllArea();
      console.log('api=获取所有地域', res);
      this.areaOptions = res.data.areaList;
    },
    /**
     * 获取全部菜单
     */
    async getAllMenus() {
      const { data: res } = await getAllMenus(this.current, this.limit);
      console.log('api=获取全部菜单', res);
      this.menus_all = res.data.permissions;
    },
    /**
     * 获取角色列表
     */
    async getRoles() {
      this.loading = true;
      if (this.searchForm.areaNumber === undefined) {
        this.searchForm.areaNumber = null;
      }
      // console.log(this.searchForm);
      const { data: res } = await getRoles(
        this.current,
        this.limit,
        this.searchForm
      );
      this.total = res.data.total;
      console.log('api=获取角色列表', res);
      this.tableData = res.data.roles;
      this.loading = false;
    },

    /**
     * 显示编辑对话框
     */
    showEditDialog(row) {
      this.formEdit.roleId = row.roleId;
      this.formEdit.roleName = row.roleName;
      this.formEdit.roleDesc = row.roleDesc;
      this.menus_role = row.permissionIds;
      this.formEdit.areaName = row.areaName;
      this.dialogEditVisible = true;
    },
    /**
     * 删除角色
     */
    deleteRole(row) {
      this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const { data: res } = await deleteRole(row.roleId);
          console.log('api=删除角色', res);
          if (res.code === 200) {
            this.$message.success('删除成功!');
            this.getRoles();
          } else {
            this.$message.error(res.message);
          }
        })
        .catch(() => {});
    }
  }
};
</script>

<style lang="scss" scoped>
.system-role {
  .pagination-warp {
    margin-top: 20px;
    position: relative;
    .el-pagination {
      position: absolute;
      right: 0;
      top: 0;
    }
  }

  .el-table {
    margin-top: 10px;
  }

  .btn-box {
    display: flex;
    justify-content: space-between;
  }

  .treeselect {
    width: 200px;
    margin-right: 5px;
    height: 40px;
  }

  .input-role-name {
    ::v-deep .el-input__inner {
      height: 39px;
    }
  }
}
</style>
